<template>
  <pane v-if="mediaInfo.uid">
    <template slot="content">
      <div class="user-card">
        <div class="user-card-head">
          <a class="user-card-avatar" target="_blank" :href="mediaInfo.openUrl">
            <img :src="mediaInfo.avatar" alt="" />
          </a>
          <div class="user-card-name">
            <a :href="mediaInfo.openUrl" target="_blank">{{mediaInfo.name}}</a>
            <subscribe :user-id="mediaInfo.uid" :follow="mediaInfo.follow"></subscribe>
          </div>
        </div>
        <ul class="user-card-article-list">
          <li v-for="item in pgcInfo.articles" class="user-card-article-item">
            <a :href="item.url" target="_blank">{{item.title}}</a>
          </li>
        </ul>
      </div>
    </template>
  </pane>
</template>

<style lang="less">
  @import './userCard.less';
</style>

<script>
  import Pane from 'byted-toutiao-pc-business-components/components/pane'
  import Subscribe from 'byted-toutiao-pc-business-components/components/subscribe'

  export default {
    props: {
      pgcInfo: Object,
      mediaInfo: Object
    },
    components: {
      Pane,
      Subscribe
    }
  }
</script>



// WEBPACK FOOTER //
// userCard.vue?ceaac4b0
